import React from "react";
import "./index.less";
import { Menu } from "antd";
import { Outlet, useNavigate } from "react-router-dom";

const MyMenu: React.FC = ({}) => {
  const nagigete = useNavigate();
  const [current, setCurrent] = React.useState("GeneraTerms");
  const items = [
    {
      label: "首页",
      key: "GeneraTerms",
    },
    {
      label: "公告管理",
      key: "AnnouncementManagement",
    },
    {
      label: "房间管理",
      key: "RoomManagement",
    },
    {
      label: "签到次数管理",
      key: "userSignManagement",
    },
  ];
  const onClick = (e: { key: string }) => {
    console.log("click ", e);
    setCurrent(e.key);
    if (e.key === "GeneraTerms") {
      nagigete(`/Manage`);
    } else {
      nagigete(`/Manage/${e.key}`);
    }
  };
  return (
    <>
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
      />
      <div className="olt-ctn">
        <Outlet></Outlet>
      </div>
    </>
  );
};
export default MyMenu;
